<template>
  <div class="bglist" @click="get(item)">
    <div class="List">
      <div class="Lpic">
        <img :src="'bimg/'+item.pic" />
      </div>

      <div class="Lcenter">
        <p class="showtop">{{item.title}}</p>
        <p class="showmain">{{item.category}} | {{item.ather}}</p>
        <p class="showmains">{{item.main}}</p>
      </div>
      <div class="Licon">
        <span class="score">
            {{item.score}}分
        </span>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "foot",
  props: {
    msg: String,
    item: "",
  },
  data() {
    return {
      active: "",
    };
  },
  methods: {
    get(item) {
      localStorage.setItem("bookbox", JSON.stringify(item));
      this.$router.push('/Details')
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bList,
.List {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 0.01rem solid rgb(209, 201, 201);
}
.List img {
  height: 3rem;
  width: 80%;
  margin-left: 0.1rem;
}

.Lpic {
  display: flex;
  width: 30%;
  flex-direction: column;
}

.Lcenter {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 60%;
}

.Licon {
  align-self: center;
}
.showtop {
  font-size: 0.4rem;
  font-weight: 600;
}
.showmain {
  color: rgb(94, 79, 79, 0.6);
  font-size: 0.3rem;
  font-weight: 500;
}
.showmains {
  color: rgb(94, 79, 79, 0.6);
  font-size: 0.3rem;
  font-weight: 500;
}
.ltitle {
  height: 0.8rem;
  font-size: 0.4rem;
  font-weight: 700;
  border-bottom: 0.01rem solid rgb(209, 201, 201);
}
.ltitle span {
  margin-left: 1rem;
}
.score {
  color: rgb(230, 153, 39);
  width: 1rem;
  display: block;
}
p{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
</style>